<template>
  <div class="flow-box">
    <ul class="steps">
      <li v-for="(item,index) in list" :key="index"
          :class="{'active':index == step,'pop-list':titleType == 3,'pop-li':titleType == 4}">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      step: {
        type: Number,
        default: 0
      },
      list: {
        type: Array,
        default: function () {
          return ['身份证扫描', '身份证信息', '银行卡扫描', '银行卡信息', '设置提现密码'];
        }
      },
      titleType: {
        type: Number,
        default: 5
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .flow-box
    height: 1.493rem
    margin-top: 0.493rem
    margin-left: 0.733rem
    margin-right: 1rem
    .steps
      display: flex
      counter-reset: step
      height: 1.493rem
      position: relative;
      li
        font-size: 0.373rem
        text-align: center
        width: 20%
        height: 1.493rem
        line-height: 0.4rem
        position: relative;
        ~ li
          &:after
            /*连接线*/
            content: '';
            width: 100%;
            height: 0.08rem;
            background-color: rgba(60, 175, 255, 1);
            position: absolute;
            left: -50%;
            top: 0.24rem;
            z-index: -1;
        /*放置在数字后面*/
        &:before
          display: flex
          justify-content: center
          content: counter(step)
          /*设定计数器内容*/
          counter-increment: step
          /*计数器值递增*/
          width: 0.56rem
          height: 0.56rem
          background-color: rgba(60, 175, 255, 1);
          border-radius: 0.56rem
          line-height: 0.65rem
          font-size: 0.373rem
          color: #fff
          text-align: center
          margin: 0rem auto 0.187rem auto;
          /*步骤数字*/
          @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
            line-height: 0.56rem
          }
          @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) {
            line-height: 0.56rem
          }
          @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
            line-height: 0.56rem
          }
          @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
            line-height: 0.56rem
          }
          @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
            line-height: 0.56rem
          }
          @media screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) {
            line-height: 0.56rem
          }
      .active
        &:before
          /*将当前/完成步骤之前的数字及连接线变蓝*/
          background-color: rgba(60, 175, 255, 1);
        &:after
          /*将当前/完成步骤之前的数字及连接线变蓝*/
          background-color: rgba(60, 175, 255, 1);
        ~ li
          &:before
            /*将当前/完成步骤之后的数字及连接线变灰*/
            background-color: rgba(242, 242, 242, 1);
          &:after
            /*将当前/完成步骤之后的数字及连接线变灰*/
            background-color: rgba(242, 242, 242, 1);
      .pop-list
        width: 33.33%
      .pop-li
        width: 25%
</style>
